<!--收藏页面-->

<!-- 小瓜子 更新于2020/08/21 -->


<!-- 小瓜子 更新于 2020/09/04 -->
<!-- 完成分页加载 -->

<!-- 小瓜子 更新于 2020/09/05 -->
<!-- 添加加载时页面 -->
<template>
	<view> 
		<!-- 加载时的页面 -->
		<view class="loading" v-if="isLoading" :style="'height:' + loadingHeight + 'px;width: 100%;'">
			<text :style="'display: block; width: 100%; height: 100%; line-height: ' + loadingHeight + 'px; text-align: center; color:#999'">加载中...</text>
		</view>
		<view class="message" v-if="!isLoading">
			<!-- 自定义导航栏(navigationbar) -->
			<view class="nav">
				<view :class="activeSwiper == 0 ? 'listTitle_active' : 'listTitle'" @tap="swichTab" :data-index="0"><text>帖子</text></view>
				<view :class="activeSwiper == 1 ? 'listTitle_active' : 'listTitle'" @tap="swichTab" :data-index="1"><text>文章</text></view>
			</view>
			<!-- 占位盒子 -->
			<view class="top_block"></view>
			<!-- 页面主体内容，使用swiper，实现左右滑动翻页 -->
			<swiper 
				:style="'height:' + swiperItemHeight + 'px;' + 'transition: height 0.5s;'" 
				@change="swiperChange" 
				:current="activeSwiper" >
				<swiper-item>
					<view :class="activeSwiper == 0 ? 'page page_active' : 'page'">
						<PostingsSummary v-for="(item,index) in SummaryList[0]" :key="index" :datas="item"></PostingsSummary>
						<UniLoadMore :status="status" color="#7F7F7F" :contentText="contentText"></UniLoadMore>
						<view class="top_box"></view>
					</view>
					<!-- <view class="" style="text-align:center; width: 100%; padding-top: 9px; color: #7F7F7F;" v-if="!SummaryList[0]">什么都没有了！</view> -->
				</swiper-item>
				<swiper-item>
					<view :class="activeSwiper == 1 ? 'page page_active' : 'page'">
						 <AcademicSummary v-for="(item,index) in SummaryList[1]" :key="index" :datas="item"></AcademicSummary>
						 <UniLoadMore :status="status" color="#7F7F7F" :contentText="contentText"></UniLoadMore>
						 <view class="top_box"></view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import AcademicSummary from '../../components/summary/AcademicSummary.vue'
	import PostingsSummary from '../../components/summary/PostingsSummary.vue'
	import UniLoadMore from '../../components/plugins/uni-load-more.vue'
	import {_ajax} from '../../in-xupt-functions.js'
	export default {
		components: {
			AcademicSummary,
			PostingsSummary,
			UniLoadMore
		},
		data() {
			return {
				loadingHeight: 0,
				isLoading: true,
				activeSwiper: 0, // 判断是哪一栏被显示（帖子/文章）
				swiperItemHeight: 0, // swiper容器的高度
				sortingMode: 0, //  排序方式
				SummaryList: [[],[]],
				// loading前：more; loading中：loading; 没有更多了：noMore
				status: "more", 
				contentText: {
					contentdown: "下拉翻找更多东西~", // loading前的文字显示
					contentrefresh: "正在翻找~~", // loading中的显示
					contentnomore: "没有东西啦！" // 没有更多的显示
				},
				userId: undefined,
				articlesPage: 1, // 文章列表的页面序号
				postsPage: 1, // 帖子列表的页面序号
				articlesSize: 5, // 文章列表的页面序号
				postsSize: 5, // 帖子列表的页面序号
				noMoreArticles: false, // 判断文章列表是否还有更多数据
				noMorePosts: false ,// 判断帖子列表是否还有更多数据
				pages: 0,
				articlePages: 0
			}
		},
		methods: {
			// 点击上方tab栏的项目时，更新当前index (activeSwiper)
			swichTab: function (e) {
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.activeSwiper = e.currentTarget.dataset.index
			},
			// 当滑动swiper或者点击导航栏上的选择项目时，重新获取swiper高度
			swiperChange: function (data) {
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.activeSwiper = data.detail.current;
				this.getheight(200);
			},
			// 获取当前swiper高度
			getheight: function(time) {
				setTimeout(() => {
					// 获取当前swiper-item的高度
					let query = uni.createSelectorQuery();
					let page_active = query.select(".page_active");
					page_active.fields({
						size: true
					}, data => {
						// 获取当前设备的高度，取swiper高度为设备高度和swiper-item高度的最大值 （这个方法有bug）
						uni.getSystemInfo({
							success: (data2) => {
								if (data.height <= data2.windowHeight) {
									this.status = 'nomore'
								}
								this.swiperItemHeight = Math.max(data2.windowHeight - 80, data.height) + 20;
								console.log(this.swiperItemHeight)
							}
						})
						uni.hideLoading()
					}).exec();
				},time)
			},
			loadMore: function() {
				this.status = 'loading';
				this.getheight(200)
				// activeSwiper为0时说明在关注列表
				if(this.activeSwiper === 1) {
					this.articlesPage++;
					this.loadArticlesList();
				
				}else if (this.activeSwiper === 0) {
					this.postsPage++;
					this.loadPostsList();
				}
			},
			// 请求收藏文章列表
			loadArticlesList() {
				let _self = this
				_ajax({
					url: '/user/favorites/articles?pageNum='+_self.articlesPage+'&pageSize='+this.articlesSize,
					method: 'GET'
				}).then(res => {
					console.log(res)
					this.getheight(200)
					if(res.data.data.isLastPage && this.articlePages == 0) {
						// console.log('这是最后一页了！')
						this.articlePages = 1
						_self.SummaryList[1].push(...res.data.data.list);
						// console.log(this.pages)
						
					}else if(this.articlePages == 1){
						_self.status = 'nomore'
					}else{
						_self.status = 'more'
						_self.SummaryList[1].push(...res.data.data.list);
						// this.getheight(500)
					}
				})
			},
			//请求收藏帖子列表
			loadPostsList() {
				let _self = this
				_ajax({
					url: '/user/favorites/posts?pageNum='+_self.postsPage+'&pageSize=' + _self.postsSize,
					method: 'GET'
				})
				.then(res => {
					console.log(res)
					this.getheight(200)
					if(res.data.data.isLastPage && this.pages == 0) {
						// console.log('这是最后一页了！')
						this.pages = 1
						_self.SummaryList[0].push(...res.data.data.list);
						// console.log(this.pages)
						
					}else if(this.pages == 1){
						_self.status = 'nomore'
					}else{
						_self.status = 'more'
						_self.SummaryList[0].push(...res.data.data.list);
						// this.getheight(500)
					}
				})
			},
			initData: function() {
				let _this = this;
				uni.showLoading({
					title: '正在加载......',
					mask: true
				});
				(async function() {
					let res1 = await _ajax({
						url: '/user/favorites/posts?pageSize=5&pageNum=' + _this.postsPage,
						method: 'GET'
					})
					let res2 = await _ajax({
						url: '/user/favorites/articles?pageSize=5&pageNum=' + _this.articlesPage,
						method: 'GET'
					}) 
					_this.isLoading = false;
					_this.SummaryList[0].push(...res1.data.data.list);
					_this.SummaryList[1].push(...res2.data.data.list);
					_this.getheight(200);
					uni.hideLoading();
				})()
			}
		},
		onLoad: function(options){
				this.activeSwiper = 0
				// 得到屏幕高度，并将这个值设置为加载遮罩层的高度
				uni.getSystemInfo({
					success: (data) => {
						this.loadingHeight = data.windowHeight;
					}
				})
				// this.getheight()
				this.initData()
		},
		// 触底加载更多
		onReachBottom: function() {
			this.status = 'loading';
			this.loadMore(this.activeSwiper)
		},
		onShow:function(){

		}
	}
</script>

<style lang="less">
	// --status-bar-height为设备状态栏高度
	@statusHeight: var(--status-bar-height);
	.inxupttubiao36::before {
		font-weight: 800;
		color: #FFFFFF;
		font-size: 18px;
	}
	.message {

		background-color: @g-background;
		// 占位盒子
		.top_block {
			height: 30px;
			width: 100%;
		}
		.nav {
			display: flex;
			align-items: center;
			justify-content: space-around;
			position: fixed;
			margin-bottom: 5px;
			height: 30px;
			width: 100%;
			background-color: #FFFFFF;
			font-size: 32rpx;
			color: @g-gray;
			box-shadow: 0rpx 0rpx 10rpx rgba(0,0,0,.1);
			z-index: 2;
			.listTitle,
			.listTitle_active {
				display: inline-block;
				line-height: 30px;
				width: 50%;
				text-align: center;
			}
			.listTitle_active {
				color: #000;
				font-weight: 800;
				border-bottom: 4px solid @g-pink;
			}
			.creat {
				margin-left: 25px;
				margin-top: 10px;
				width: 50rpx;
				height: 25px;
				line-height: 25px;
				text-align: center;
				border-radius: 5px;
				background-color: @g-pink;
			}
		}
		swiper {
			color: #000;
			z-index: 0;
			// min-height: 1000rpx;
			padding-bottom: 100rpx;
		}
		.page {
			width: 100%;
		}
	}
	.top_box {
		height: 30rpx;
		width: 100%;
	}
</style>
